<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<!--      <el-form-item label="员工编号" prop="staffId">
        <el-input
          v-model="queryParams.staffId"
          placeholder="请输入员工编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>-->
      <el-form-item label="员工姓名" prop="staffName">
        <el-input
          v-model="queryParams.staffName"
          placeholder="请输入员工姓名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
<!--      <el-form-item label="业务编号" prop="businessId">
        <el-input
          v-model="queryParams.businessId"
          placeholder="请输入业务编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="业务类型编码" prop="businessTypeId">
        <el-input
          v-model="queryParams.businessTypeId"
          placeholder="请输入业务类型编码"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="业务类型名称" prop="businessTypeName">
        <el-input
          v-model="queryParams.businessTypeName"
          placeholder="请输入业务类型名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>-->
      <el-form-item label="申请时间" prop="applyTime">
        <el-date-picker clearable
                        v-model="queryParams.applyTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择申请时间">
        </el-date-picker>
      </el-form-item>
<!--      <el-form-item label="开始时间" prop="beginTime">
        <el-date-picker clearable
                        v-model="queryParams.beginTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择开始时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间" prop="endTime">
        <el-date-picker clearable
                        v-model="queryParams.endTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择结束时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="天数" prop="days">
        <el-input
          v-model="queryParams.days"
          placeholder="请输入天数"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="当前审批人编号" prop="approvalId">
        <el-input
          v-model="queryParams.approvalId"
          placeholder="请输入当前审批人编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="当前审批人姓名" prop="approvalName">
        <el-input
          v-model="queryParams.approvalName"
          placeholder="请输入当前审批人姓名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="当前流程编码" prop="flowId">
        <el-input
          v-model="queryParams.flowId"
          placeholder="请输入当前流程编码"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="是否完成" prop="isFinish">
        <el-input
          v-model="queryParams.isFinish"
          placeholder="请输入是否完成"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="附件编号" prop="annexId">
        <el-input
          v-model="queryParams.annexId"
          placeholder="请输入附件编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="附件名称" prop="annexName">
        <el-input
          v-model="queryParams.annexName"
          placeholder="请输入附件名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="是否上传附件" prop="isAnnex">
        <el-input
          v-model="queryParams.isAnnex"
          placeholder="请输入是否上传附件"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="备用字段一" prop="standbyOne">
        <el-input
          v-model="queryParams.standbyOne"
          placeholder="请输入备用字段一"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="备用字段二" prop="standbyTwo">
        <el-input
          v-model="queryParams.standbyTwo"
          placeholder="请输入备用字段二"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="备用字段三" prop="standbyThree">
        <el-input
          v-model="queryParams.standbyThree"
          placeholder="请输入备用字段三"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>-->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['oa:attendance:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['oa:attendance:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['oa:attendance:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['oa:attendance:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="mainList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
<!--      <el-table-column label="主键id" align="center" prop="id" />
      <el-table-column label="员工编号" align="center" prop="staffId" />-->
      <el-table-column label="员工姓名" align="center" prop="staffName" />
      <el-table-column label="业务编号" align="center" prop="businessId" />
      <el-table-column label="所属部门" align="center" prop="standbyTwo" />
<!--      <el-table-column label="业务类型编码" align="center" prop="businessTypeId" />-->
      <el-table-column label="业务类型名称" align="center" prop="businessTypeName" />
      <el-table-column label="申请时间" align="center" prop="applyTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.applyTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
<!--      <el-table-column label="开始时间" align="center" prop="beginTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.beginTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="结束时间" align="center" prop="endTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.endTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="天数" align="center" prop="days" />-->
<!--      <el-table-column label="当前审批人编号" align="center" prop="approvalId" />-->
      <el-table-column label="下一环节审批人" align="center" prop="approvalName" />
<!--      <el-table-column label="当前流程编码" align="center" prop="flowId" />
      <el-table-column label="事由" align="center" prop="reason" />-->
      <el-table-column label="下一环节名称" align="center" prop="standbyThree" width="100" />
<!--      <el-table-column label="附件编号" align="center" prop="annexId" />
      <el-table-column label="附件名称" align="center" prop="annexName" />
      <el-table-column label="是否上传附件" align="center" prop="isAnnex" />
      <el-table-column label="备注" align="center" prop="remarks" />
      <el-table-column label="备用字段一" align="center" prop="standbyOne" />
      <el-table-column label="备用字段二" align="center" prop="standbyTwo" />
      <el-table-column label="备用字段三" align="center" prop="standbyThree" />-->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['oa:attendance:edit']"
          >修改</el-button>
          <el-button v-if="scope.row.isFinish!='1'"
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['oa:attendance:remove']"
          >删除</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="viewActiviti(scope.row.businessTypeId)"
            v-hasPermi="['oa:attendance:query']"
          >查看流程图</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="viewActiviti(scope.row.businessTypeId)"
            v-hasPermi="['oa:attendance:query']"
          >详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改【请填写功能名称】对话框 -->
    <el-dialog :title="title" :visible.sync="open" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
<!--        <el-form-item label="员工编号" prop="staffId">
          <el-input v-model="form.staffId" placeholder="请输入员工编号" style="width:70%;"/>
        </el-form-item>-->
<!--        <el-form-item label="员工姓名" prop="staffName">
          <el-input v-model="form.staffName" placeholder="请输入员工姓名" style="width:70%;"/>
        </el-form-item>-->
<!--        <el-form-item label="业务编号" prop="businessId">
          <el-input v-model="form.businessId" placeholder="请输入业务编号" />
        </el-form-item>-->
<!--        <el-form-item label="业务类型编码" prop="businessTypeId">
          <el-input v-model="form.businessTypeId" placeholder="请输入业务类型编码" />
        </el-form-item>-->
        <el-form-item label="业务类型名称" prop="businessTypeName">
          <el-select ref="optionRef_business" v-model="form.businessTypeId" style="width:30%;height: 33px;margin-right: 20px;border: 1px solid #DCDFE6;border-radius: 4px;text-align: center">
            <el-option v-for="x in this.business_data" :key="x.activitiId" :label="x.activitiName" :value='x.activitiId'>{{x.activitiName}}</el-option>
          </el-select>
        </el-form-item>
<!--        <el-form-item label="申请时间" prop="applyTime">
          <el-date-picker clearable
                          v-model="form.applyTime"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择申请时间" style="width:30%;">
          </el-date-picker>
        </el-form-item>-->
        <el-form-item label="开始时间" prop="beginTime">
          <el-date-picker clearable
                          v-model="form.beginTime"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择开始时间" style="width:30%;">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
          <el-date-picker clearable
                          v-model="form.endTime"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择结束时间" style="width:30%;">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="天数" prop="days">
          <el-input v-model="form.days" placeholder="请输入天数" style="width:30%;" :readonly="true"/>
        </el-form-item>
<!--        <el-form-item label="当前审批人编号" prop="approvalId">
          <el-input v-model="form.approvalId" placeholder="请输入当前审批人编号" />
        </el-form-item>
        <el-form-item label="当前审批人姓名" prop="approvalName">
          <el-input v-model="form.approvalName" placeholder="请输入当前审批人姓名" />
        </el-form-item>-->
<!--        <el-form-item label="当前流程编码" prop="flowId">
          <el-input v-model="form.flowId" placeholder="请输入当前流程编码" />
        </el-form-item>-->
<!--        <el-form-item label="是否完成" prop="isFinish">
            <el-select v-model="form.isFinish" placeholder="请选择">
              <el-option
                v-for="dict in dict.type.is_finish"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
        </el-form-item>-->
        <el-form-item label="申请事由" prop="reason">
          <el-input v-model="form.reason" type="textarea" placeholder="请输入内容" style="width:70%;" />
        </el-form-item>
        <el-form-item label="附件上传">
          <div class="file">
            <input type="file" class="updata" accept="image/*" @change="change($event)" ref="updata">
            <img :src="this.baseImg" alt="" class="img">
          </div>
        </el-form-item>
        <div style="width: 95%;">
          <table style="text-align: center;width: 95%;margin-left: 35px;margin-bottom:25px;line-height: 35px;">
            <thead>
            <tr>
              <th style="border: 1px solid #DCDFE6;border-bottom: none;" colspan="4">流程审批过程信息</th>
            </tr>
            <tr>
              <th style="border: 1px solid #DCDFE6;">流程环节</th>
              <th style="border: 1px solid #DCDFE6;border-left: none;">审批人员</th>
              <th style="border: 1px solid #DCDFE6;border-left: none;">审批时间</th>
              <th style="border: 1px solid #DCDFE6;border-left: none;">审批意见</th>
            </tr>
            </thead>
            <tbody>
            <tr  v-for="item in activiti_flow_data" :key="item.id">
              <td class="td_top">{{item.a}}</td>
              <td class="td_other">{{item.b}}</td>
              <td class="td_other">{{item.c}}</td>
              <td class="td_other">{{item.d}}</td>
            </tr>
            </tbody>
          </table>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="下一环节" prop="flowId">
              <el-select ref="optionRef_flow" v-model="form.flowId" style="width:90%;height: 33px;margin-right: 20px;border: 1px solid #DCDFE6;border-radius: 4px;text-align: center" @change="selectUserByflowId">
                <el-option v-for="x in this.flow_data" :key="x.roleId" :label="x.nodeName" :value='x.roleId'>{{x.nodeName}}</el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="审批人员" prop="approvalName">
              <el-input v-model="form.approvalName" maxlength="30" :readonly="true"/>
            </el-form-item>
          </el-col>
        </el-row>
<!--        <el-form-item label="附件编号" prop="annexId">
          <el-input v-model="form.annexId" placeholder="请输入附件编号" />
        </el-form-item>
        <el-form-item label="附件名称" prop="annexName">
          <el-input v-model="form.annexName" placeholder="请输入附件名称" />
        </el-form-item>
        <el-form-item label="是否上传附件" prop="isAnnex">
          <el-input v-model="form.isAnnex" placeholder="请输入是否上传附件" />
        </el-form-item>
        <el-form-item label="备用字段一" prop="standbyOne">
          <el-input v-model="form.standbyOne" placeholder="请输入备用字段一" />
        </el-form-item>
        <el-form-item label="备用字段二" prop="standbyTwo">
          <el-input v-model="form.standbyTwo" placeholder="请输入备用字段二" />
        </el-form-item>
        <el-form-item label="备用字段三" prop="standbyThree">
          <el-input v-model="form.standbyThree" placeholder="请输入备用字段三" />
        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm(0)">存草稿</el-button>
        <el-button type="primary" @click="submitForm(1)">提 交</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listMain, getMain, delMain, addMain, updateMain, upload_img, get_business_type, getActiviti, getUserInfoByNodeId } from "@/api/system/attendance";

export default {
  name: "Main",
  dicts: ['is_finish'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 【请填写功能名称】表格数据
      mainList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 默认图片路径
      baseImg: null,
      // 考勤类型
      business_data:[],
      // 流程节点
      flow_data:[],
      // 对应审批人员
      userList: [],
      // 审批过程信息表
      activiti_flow_data: [{id:'1',a:'组长审批',b:'测试组长',c:'2023-08-11 11:15:56',d:'同意此申请，请严格按照申请时间返岗！'},{id:'2',a:'行政/人事审批',b:'测试行政',c:'2023-08-11 12:16:53',d:'同意'},{id:'3',a:'副总经理审批',b:'测试副总经理',c:'2023-08-12 10:25:26',d:'同意'}],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        staffId: null,
        staffName: null,
        businessId: null,
        businessTypeId: null,
        businessTypeName: null,
        applyTime: null,
        beginTime: null,
        endTime: null,
        days: null,
        approvalId: null,
        approvalName: null,
        flowId: null,
        reason: null,
        isFinish: null,
        annexId: null,
        annexName: null,
        isAnnex: null,
        remarks: null,
        standbyOne: null,
        standbyTwo: null,
        standbyThree: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.getBusinessType();
    this.getList();
  },
  methods: {
    /** 查询【请填写功能名称】列表 */
    getList() {
      this.loading = true;
      listMain(this.queryParams).then(response => {
        this.mainList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        staffId: null,
        staffName: null,
        businessId: null,
        businessTypeId: null,
        businessTypeName: null,
        applyTime: null,
        beginTime: null,
        endTime: null,
        days: null,
        approvalId: null,
        approvalName: null,
        flowId: null,
        reason: null,
        isFinish: null,
        annexId: null,
        annexName: null,
        isAnnex: null,
        remarks: null,
        standbyOne: null,
        standbyTwo: null,
        standbyThree: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      // 获取默认显示的图片
      this.baseImg = require('./pic/sc_bj.png');
      this.open = true;
      this.title = "添加【请填写功能名称】";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getMain(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改【请填写功能名称】";
      });
      // 点击修改进入流程审批页面
      getActiviti(row.businessTypeId).then(response => {
        this.flow_data = response.list;
      });
    },
    /** 提交按钮 */
    submitForm(state) {
      this.$refs["form"].validate(valid => {
        // 流程名称赋值
        this.form.businessTypeName=this.$refs.optionRef_business.selected.label;
        this.form.isFinish=state;
        if (valid) {
          if (this.form.id != null) {
            updateMain(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addMain(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除【请填写功能名称】编号为"' + ids + '"的数据项？').then(function() {
        return delMain(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('oa/attendance/export', {
        ...this.queryParams
      }, `main_${new Date().getTime()}.xlsx`)
    },
    /**  附件上传 */
    change(e) {
      console.log(e.target.files[0].name);
      // 判断是不是规定格式
      // let name  =  e.target.files[0].name
      let formData = new window.FormData();
      // 获取到第一张图片
      let file = e.target.files[0]
      formData.append('file',file);
      console.info(file);
      // 创建文件读取对象
      var reader = new FileReader()
      var that = this
      //  将文件读取为DataURL
      reader.readAsDataURL(file)
      // 读取成功调用方法
      reader.onload = e => {
        console.log('读取成功');
        // // e.target.result 获取 读取成功后的  文件DataURL
        // that.imageUrl = e.target.result
        // 如果要将图片上传服务器，就在这里调用后台方法
        upload_img(formData).then(response => {
          that.baseImg =response.imgUrl;
        });
      }
    },
    // 获取考勤类型信息
    getBusinessType(){
      get_business_type().then(response => {
        this.business_data =response.list;
      });
    },
    // 查看流程图
    viewActiviti(id){
      this.$router.push({ path: '/oa/activiti_main_info/activiti/',query: {id:id}})
    },
    // 根据流程环节选择对应审批人员
    selectUserByflowId(key){
      let nodeId =key+"&"+this.form.id+"&"+this.form.standbyOne;
      let sp_id = "";
      let sp_n = "";
      getUserInfoByNodeId(nodeId).then(response => {
        this.userList = response.list;
        for (let i = 0; i < this.userList.length; i++) {
          sp_id += this.userList[i].userId+",";
          sp_n += this.userList[i].nickName+",";
        }
        this.form.standbyThree = this.$refs.optionRef_flow.selected.label;
        this.form.approvalId = sp_id.substring(0,sp_id.length-1);
        this.form.approvalName = sp_n.substring(0,sp_n.length-1);
      });
    }
  }
};
</script>
<style>
.file {
  position: relative;
  width: 200px;
  height: 150px;
  background-color: #ccc;
}
.updata {
  display: block;
  height: 100%;
  width: 100%;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}
.img {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 150px;
}
.td_top {
  border: 1px solid #DCDFE6;
  border-top: none;
}
.td_other {
  border: 1px solid #DCDFE6;
  border-left: none;
  border-top: none;
}
</style>
